<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>anychart</title>
    <style>

        body {
            font-family: sans-serif;
            margin: 0;
            padding: 10px 20px;
            text-align: center;
        }

        h1 small {
            color: #666;
            font-size: 50%;
        }

        .preview {
            width: 15%;
            display: inline-block;
            margin: 10px;
        }

        .preview.hidden {
            display: none;
        }

        .preview .inner {
            display: inline-block;
            width: 100%;
            text-align: center;
            background: #f5f5f5;
            -webkit-border-radius: 3px 3px 0 0;
            -moz-border-radius: 3px 3px 0 0;
            border-radius: 3px 3px 0 0;
        }

        .preview .inner span {
            line-height: 85px;
            font-size: 60px;
            color: #333;
        }

        .label {
            display: inline-block;
            width: 100%;
            box-sizing: border-box;
            padding: 5px;
            font-size: 16px;
            font-family: Monaco, monospace;
            color: #666;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            background: #ddd;
            -webkit-border-radius: 0 0 3px 3px;
            -moz-border-radius: 0 0 3px 3px;
            border-radius: 0 0 3px 3px;
            color: #666;
        }

        input {
            width: 80%;
            margin: 0 auto 30px;
            display: block;
            line-height: 50px;
            font-size: 36px;
            border: none;
            border-bottom: 1px solid #333;
        }
        .font-alert {
            position: fixed;
            top: 20px;
            right: 20px;
            background: #26a957;
            padding: 10px 15px;
            border-radius: 3px;
            color: #fff !important;
        }

    </style>
    <link rel="stylesheet" href="../css/anychart-font.min.css">
</head>

<body>

    <h1>AnyChart Fonts by <a href="http://anychart.com">AnyChart</a><br/><small>Click on icon to copy it's HTML-code</small></h1>

    <input type="text" />


    <div class="preview">
        <span class="inner">
            <span class="ac ac-align-center"></span>
        </span>
        <br>
        <span class='label'>align-center</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-align-justify-copy"></span>
        </span>
        <br>
        <span class='label'>align-justify-copy</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-align-justify"></span>
        </span>
        <br>
        <span class='label'>align-justify</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-align-left"></span>
        </span>
        <br>
        <span class='label'>align-left</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-align-right"></span>
        </span>
        <br>
        <span class='label'>align-right</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-anchor-center-bottom"></span>
        </span>
        <br>
        <span class='label'>anchor-center-bottom</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-anchor-center-top"></span>
        </span>
        <br>
        <span class='label'>anchor-center-top</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-anchor-center"></span>
        </span>
        <br>
        <span class='label'>anchor-center</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-anchor-left-bottom"></span>
        </span>
        <br>
        <span class='label'>anchor-left-bottom</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-anchor-left-center"></span>
        </span>
        <br>
        <span class='label'>anchor-left-center</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-anchor-left-top"></span>
        </span>
        <br>
        <span class='label'>anchor-left-top</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-anchor-right-bottom"></span>
        </span>
        <br>
        <span class='label'>anchor-right-bottom</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-anchor-right-center"></span>
        </span>
        <br>
        <span class='label'>anchor-right-center</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-anchor-right-top"></span>
        </span>
        <br>
        <span class='label'>anchor-right-top</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-andrews-pitchfork"></span>
        </span>
        <br>
        <span class='label'>andrews-pitchfork</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-anychart"></span>
        </span>
        <br>
        <span class='label'>anychart</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-anychart2"></span>
        </span>
        <br>
        <span class='label'>anychart2</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-anygantt"></span>
        </span>
        <br>
        <span class='label'>anygantt</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-anymap"></span>
        </span>
        <br>
        <span class='label'>anymap</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-anymap2"></span>
        </span>
        <br>
        <span class='label'>anymap2</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-anystock"></span>
        </span>
        <br>
        <span class='label'>anystock</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-api"></span>
        </span>
        <br>
        <span class='label'>api</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-arrow-down-left-square"></span>
        </span>
        <br>
        <span class='label'>arrow-down-left-square</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-arrow-down-left-thin"></span>
        </span>
        <br>
        <span class='label'>arrow-down-left-thin</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-arrow-down-right-square"></span>
        </span>
        <br>
        <span class='label'>arrow-down-right-square</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-arrow-down-right-thin"></span>
        </span>
        <br>
        <span class='label'>arrow-down-right-thin</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-arrow-down-square"></span>
        </span>
        <br>
        <span class='label'>arrow-down-square</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-arrow-down-thin"></span>
        </span>
        <br>
        <span class='label'>arrow-down-thin</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-arrow-down"></span>
        </span>
        <br>
        <span class='label'>arrow-down</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-arrow-left-square"></span>
        </span>
        <br>
        <span class='label'>arrow-left-square</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-arrow-left-thin"></span>
        </span>
        <br>
        <span class='label'>arrow-left-thin</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-arrow-left"></span>
        </span>
        <br>
        <span class='label'>arrow-left</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-arrow-right-square"></span>
        </span>
        <br>
        <span class='label'>arrow-right-square</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-arrow-right-thin"></span>
        </span>
        <br>
        <span class='label'>arrow-right-thin</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-arrow-right"></span>
        </span>
        <br>
        <span class='label'>arrow-right</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-arrow-up-left-square"></span>
        </span>
        <br>
        <span class='label'>arrow-up-left-square</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-arrow-up-left-thin"></span>
        </span>
        <br>
        <span class='label'>arrow-up-left-thin</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-arrow-up-right-square"></span>
        </span>
        <br>
        <span class='label'>arrow-up-right-square</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-arrow-up-right-thin"></span>
        </span>
        <br>
        <span class='label'>arrow-up-right-thin</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-arrow-up-square"></span>
        </span>
        <br>
        <span class='label'>arrow-up-square</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-arrow-up-thin"></span>
        </span>
        <br>
        <span class='label'>arrow-up-thin</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-arrow-up"></span>
        </span>
        <br>
        <span class='label'>arrow-up</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-asterisk"></span>
        </span>
        <br>
        <span class='label'>asterisk</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-backward"></span>
        </span>
        <br>
        <span class='label'>backward</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-bars"></span>
        </span>
        <br>
        <span class='label'>bars</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-bold"></span>
        </span>
        <br>
        <span class='label'>bold</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-book"></span>
        </span>
        <br>
        <span class='label'>book</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-bookmark"></span>
        </span>
        <br>
        <span class='label'>bookmark</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-bullhorn-2"></span>
        </span>
        <br>
        <span class='label'>bullhorn-2</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-bullhorn"></span>
        </span>
        <br>
        <span class='label'>bullhorn</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-calendar-plus-o"></span>
        </span>
        <br>
        <span class='label'>calendar-plus-o</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-calendar"></span>
        </span>
        <br>
        <span class='label'>calendar</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-caret-down"></span>
        </span>
        <br>
        <span class='label'>caret-down</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-caret-left"></span>
        </span>
        <br>
        <span class='label'>caret-left</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-caret-right"></span>
        </span>
        <br>
        <span class='label'>caret-right</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-caret-up"></span>
        </span>
        <br>
        <span class='label'>caret-up</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-chart-area"></span>
        </span>
        <br>
        <span class='label'>chart-area</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-chart-column"></span>
        </span>
        <br>
        <span class='label'>chart-column</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-chart-column2"></span>
        </span>
        <br>
        <span class='label'>chart-column2</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-chart-database-o"></span>
        </span>
        <br>
        <span class='label'>chart-database-o</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-chart-database-o2"></span>
        </span>
        <br>
        <span class='label'>chart-database-o2</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-chart-financial"></span>
        </span>
        <br>
        <span class='label'>chart-financial</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-chart-gauge"></span>
        </span>
        <br>
        <span class='label'>chart-gauge</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-chart-ruler-o"></span>
        </span>
        <br>
        <span class='label'>chart-ruler-o</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-chart-ruler-pencil"></span>
        </span>
        <br>
        <span class='label'>chart-ruler-pencil</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-chart-ruler-pencil2"></span>
        </span>
        <br>
        <span class='label'>chart-ruler-pencil2</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-chart-ruler"></span>
        </span>
        <br>
        <span class='label'>chart-ruler</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-charts-many"></span>
        </span>
        <br>
        <span class='label'>charts-many</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-check-circle-o"></span>
        </span>
        <br>
        <span class='label'>check-circle-o</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-check-circle-thick"></span>
        </span>
        <br>
        <span class='label'>check-circle-thick</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-check-thin"></span>
        </span>
        <br>
        <span class='label'>check-thin</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-check"></span>
        </span>
        <br>
        <span class='label'>check</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-checkbox-checked"></span>
        </span>
        <br>
        <span class='label'>checkbox-checked</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-chevron-circle-down-thin"></span>
        </span>
        <br>
        <span class='label'>chevron-circle-down-thin</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-chevron-circle-down"></span>
        </span>
        <br>
        <span class='label'>chevron-circle-down</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-chevron-circle-left-thin"></span>
        </span>
        <br>
        <span class='label'>chevron-circle-left-thin</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-chevron-circle-left"></span>
        </span>
        <br>
        <span class='label'>chevron-circle-left</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-chevron-circle-right-thin"></span>
        </span>
        <br>
        <span class='label'>chevron-circle-right-thin</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-chevron-circle-right"></span>
        </span>
        <br>
        <span class='label'>chevron-circle-right</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-chevron-circle-up-thin"></span>
        </span>
        <br>
        <span class='label'>chevron-circle-up-thin</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-chevron-circle-up"></span>
        </span>
        <br>
        <span class='label'>chevron-circle-up</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-chevron-down-thick"></span>
        </span>
        <br>
        <span class='label'>chevron-down-thick</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-chevron-down"></span>
        </span>
        <br>
        <span class='label'>chevron-down</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-chevron-left-thick"></span>
        </span>
        <br>
        <span class='label'>chevron-left-thick</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-chevron-left"></span>
        </span>
        <br>
        <span class='label'>chevron-left</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-chevron-right-thick"></span>
        </span>
        <br>
        <span class='label'>chevron-right-thick</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-chevron-right"></span>
        </span>
        <br>
        <span class='label'>chevron-right</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-chevron-up-thick"></span>
        </span>
        <br>
        <span class='label'>chevron-up-thick</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-chevron-up"></span>
        </span>
        <br>
        <span class='label'>chevron-up</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-clear"></span>
        </span>
        <br>
        <span class='label'>clear</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-clipboard"></span>
        </span>
        <br>
        <span class='label'>clipboard</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-clone"></span>
        </span>
        <br>
        <span class='label'>clone</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-cloud-upload"></span>
        </span>
        <br>
        <span class='label'>cloud-upload</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-code"></span>
        </span>
        <br>
        <span class='label'>code</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-cog-o"></span>
        </span>
        <br>
        <span class='label'>cog-o</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-cog"></span>
        </span>
        <br>
        <span class='label'>cog</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-collapse"></span>
        </span>
        <br>
        <span class='label'>collapse</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-comment-o"></span>
        </span>
        <br>
        <span class='label'>comment-o</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-comment"></span>
        </span>
        <br>
        <span class='label'>comment</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-comments-o"></span>
        </span>
        <br>
        <span class='label'>comments-o</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-cross"></span>
        </span>
        <br>
        <span class='label'>cross</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-deaf"></span>
        </span>
        <br>
        <span class='label'>deaf</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-desktop"></span>
        </span>
        <br>
        <span class='label'>desktop</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-diagonal-cros"></span>
        </span>
        <br>
        <span class='label'>diagonal-cros</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-diamond"></span>
        </span>
        <br>
        <span class='label'>diamond</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-disk-slash"></span>
        </span>
        <br>
        <span class='label'>disk-slash</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-dot-square-o"></span>
        </span>
        <br>
        <span class='label'>dot-square-o</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-download-chart"></span>
        </span>
        <br>
        <span class='label'>download-chart</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-download-picture"></span>
        </span>
        <br>
        <span class='label'>download-picture</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-download-zip"></span>
        </span>
        <br>
        <span class='label'>download-zip</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-download"></span>
        </span>
        <br>
        <span class='label'>download</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-edit"></span>
        </span>
        <br>
        <span class='label'>edit</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-ellipse-thin"></span>
        </span>
        <br>
        <span class='label'>ellipse-thin</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-ellipse"></span>
        </span>
        <br>
        <span class='label'>ellipse</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-enlarge"></span>
        </span>
        <br>
        <span class='label'>enlarge</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-envelope"></span>
        </span>
        <br>
        <span class='label'>envelope</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-exclamation"></span>
        </span>
        <br>
        <span class='label'>exclamation</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-expand"></span>
        </span>
        <br>
        <span class='label'>expand</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-facebook"></span>
        </span>
        <br>
        <span class='label'>facebook</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-fibonacci-arc"></span>
        </span>
        <br>
        <span class='label'>fibonacci-arc</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-fibonacci-fan"></span>
        </span>
        <br>
        <span class='label'>fibonacci-fan</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-fibonacci-retracement"></span>
        </span>
        <br>
        <span class='label'>fibonacci-retracement</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-fibonacci-timezones"></span>
        </span>
        <br>
        <span class='label'>fibonacci-timezones</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-file-archive-o"></span>
        </span>
        <br>
        <span class='label'>file-archive-o</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-file-code-o"></span>
        </span>
        <br>
        <span class='label'>file-code-o</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-file-excel-o"></span>
        </span>
        <br>
        <span class='label'>file-excel-o</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-file-image-o"></span>
        </span>
        <br>
        <span class='label'>file-image-o</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-file-pdf-o"></span>
        </span>
        <br>
        <span class='label'>file-pdf-o</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-file-text"></span>
        </span>
        <br>
        <span class='label'>file-text</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-fill-o"></span>
        </span>
        <br>
        <span class='label'>fill-o</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-fill"></span>
        </span>
        <br>
        <span class='label'>fill</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-folder-open"></span>
        </span>
        <br>
        <span class='label'>folder-open</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-folder"></span>
        </span>
        <br>
        <span class='label'>folder</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-font"></span>
        </span>
        <br>
        <span class='label'>font</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-forward"></span>
        </span>
        <br>
        <span class='label'>forward</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-forward2"></span>
        </span>
        <br>
        <span class='label'>forward2</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-free"></span>
        </span>
        <br>
        <span class='label'>free</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-git"></span>
        </span>
        <br>
        <span class='label'>git</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-globe"></span>
        </span>
        <br>
        <span class='label'>globe</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-group"></span>
        </span>
        <br>
        <span class='label'>group</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-h-line-dashed-1"></span>
        </span>
        <br>
        <span class='label'>h-line-dashed-1</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-h-line-dashed-2"></span>
        </span>
        <br>
        <span class='label'>h-line-dashed-2</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-h-line-dashed-3"></span>
        </span>
        <br>
        <span class='label'>h-line-dashed-3</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-h-line-dashed-4"></span>
        </span>
        <br>
        <span class='label'>h-line-dashed-4</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-h-line-dashed-5"></span>
        </span>
        <br>
        <span class='label'>h-line-dashed-5</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-h-line-dotted-1"></span>
        </span>
        <br>
        <span class='label'>h-line-dotted-1</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-h-line-dotted-2"></span>
        </span>
        <br>
        <span class='label'>h-line-dotted-2</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-h-line-dotted-3"></span>
        </span>
        <br>
        <span class='label'>h-line-dotted-3</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-h-line-dotted-4"></span>
        </span>
        <br>
        <span class='label'>h-line-dotted-4</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-h-line-dotted-5"></span>
        </span>
        <br>
        <span class='label'>h-line-dotted-5</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-h-line-thickness-1"></span>
        </span>
        <br>
        <span class='label'>h-line-thickness-1</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-h-line-thickness-2"></span>
        </span>
        <br>
        <span class='label'>h-line-thickness-2</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-h-line-thickness-3"></span>
        </span>
        <br>
        <span class='label'>h-line-thickness-3</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-h-line-thickness-4"></span>
        </span>
        <br>
        <span class='label'>h-line-thickness-4</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-h-line-thickness-5"></span>
        </span>
        <br>
        <span class='label'>h-line-thickness-5</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-head-arrow"></span>
        </span>
        <br>
        <span class='label'>head-arrow</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-horizontal-line"></span>
        </span>
        <br>
        <span class='label'>horizontal-line</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-horizontal-range"></span>
        </span>
        <br>
        <span class='label'>horizontal-range</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-html5"></span>
        </span>
        <br>
        <span class='label'>html5</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-infinite-line"></span>
        </span>
        <br>
        <span class='label'>infinite-line</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-info-circle"></span>
        </span>
        <br>
        <span class='label'>info-circle</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-info"></span>
        </span>
        <br>
        <span class='label'>info</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-italic"></span>
        </span>
        <br>
        <span class='label'>italic</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-javascript"></span>
        </span>
        <br>
        <span class='label'>javascript</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-jsfiddle"></span>
        </span>
        <br>
        <span class='label'>jsfiddle</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-keyboard-o"></span>
        </span>
        <br>
        <span class='label'>keyboard-o</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-light-bulb"></span>
        </span>
        <br>
        <span class='label'>light-bulb</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-line"></span>
        </span>
        <br>
        <span class='label'>line</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-linkedin"></span>
        </span>
        <br>
        <span class='label'>linkedin</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-lock"></span>
        </span>
        <br>
        <span class='label'>lock</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-logo"></span>
        </span>
        <br>
        <span class='label'>logo</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-low-vision"></span>
        </span>
        <br>
        <span class='label'>low-vision</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-map-o"></span>
        </span>
        <br>
        <span class='label'>map-o</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-map2-o"></span>
        </span>
        <br>
        <span class='label'>map2-o</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-minus"></span>
        </span>
        <br>
        <span class='label'>minus</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-mobile-phone"></span>
        </span>
        <br>
        <span class='label'>mobile-phone</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-mobile"></span>
        </span>
        <br>
        <span class='label'>mobile</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-mouse-pointer"></span>
        </span>
        <br>
        <span class='label'>mouse-pointer</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-net"></span>
        </span>
        <br>
        <span class='label'>net</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-object-group"></span>
        </span>
        <br>
        <span class='label'>object-group</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-object-ungroup"></span>
        </span>
        <br>
        <span class='label'>object-ungroup</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-overline"></span>
        </span>
        <br>
        <span class='label'>overline</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-pause"></span>
        </span>
        <br>
        <span class='label'>pause</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-pentagon"></span>
        </span>
        <br>
        <span class='label'>pentagon</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-phone-call"></span>
        </span>
        <br>
        <span class='label'>phone-call</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-picture-o"></span>
        </span>
        <br>
        <span class='label'>picture-o</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-pinterest"></span>
        </span>
        <br>
        <span class='label'>pinterest</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-plane"></span>
        </span>
        <br>
        <span class='label'>plane</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-play"></span>
        </span>
        <br>
        <span class='label'>play</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-plus"></span>
        </span>
        <br>
        <span class='label'>plus</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-position-bottom"></span>
        </span>
        <br>
        <span class='label'>position-bottom</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-position-center"></span>
        </span>
        <br>
        <span class='label'>position-center</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-position-center2"></span>
        </span>
        <br>
        <span class='label'>position-center2</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-position-left"></span>
        </span>
        <br>
        <span class='label'>position-left</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-position-right"></span>
        </span>
        <br>
        <span class='label'>position-right</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-position-top"></span>
        </span>
        <br>
        <span class='label'>position-top</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-preview"></span>
        </span>
        <br>
        <span class='label'>preview</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-print"></span>
        </span>
        <br>
        <span class='label'>print</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-print2"></span>
        </span>
        <br>
        <span class='label'>print2</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-puzzle-o"></span>
        </span>
        <br>
        <span class='label'>puzzle-o</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-puzzle"></span>
        </span>
        <br>
        <span class='label'>puzzle</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-question-circle-1"></span>
        </span>
        <br>
        <span class='label'>question-circle-1</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-question-circle-o"></span>
        </span>
        <br>
        <span class='label'>question-circle-o</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-question-circle-thin"></span>
        </span>
        <br>
        <span class='label'>question-circle-thin</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-question-circle"></span>
        </span>
        <br>
        <span class='label'>question-circle</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-question"></span>
        </span>
        <br>
        <span class='label'>question</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-random"></span>
        </span>
        <br>
        <span class='label'>random</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-ray"></span>
        </span>
        <br>
        <span class='label'>ray</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-rectangle-1"></span>
        </span>
        <br>
        <span class='label'>rectangle-1</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-rectangle-2"></span>
        </span>
        <br>
        <span class='label'>rectangle-2</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-rectangle"></span>
        </span>
        <br>
        <span class='label'>rectangle</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-redo"></span>
        </span>
        <br>
        <span class='label'>redo</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-refresh"></span>
        </span>
        <br>
        <span class='label'>refresh</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-remove-circle"></span>
        </span>
        <br>
        <span class='label'>remove-circle</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-remove-thin"></span>
        </span>
        <br>
        <span class='label'>remove-thin</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-remove"></span>
        </span>
        <br>
        <span class='label'>remove</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-remove2-thin"></span>
        </span>
        <br>
        <span class='label'>remove2-thin</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-reply"></span>
        </span>
        <br>
        <span class='label'>reply</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-resize"></span>
        </span>
        <br>
        <span class='label'>resize</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-reverse"></span>
        </span>
        <br>
        <span class='label'>reverse</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-rss"></span>
        </span>
        <br>
        <span class='label'>rss</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-ruler-paint-brush-o"></span>
        </span>
        <br>
        <span class='label'>ruler-paint-brush-o</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-ruler-paint-brush"></span>
        </span>
        <br>
        <span class='label'>ruler-paint-brush</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-save"></span>
        </span>
        <br>
        <span class='label'>save</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-search"></span>
        </span>
        <br>
        <span class='label'>search</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-search2"></span>
        </span>
        <br>
        <span class='label'>search2</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-share"></span>
        </span>
        <br>
        <span class='label'>share</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-small-caps"></span>
        </span>
        <br>
        <span class='label'>small-caps</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-smile"></span>
        </span>
        <br>
        <span class='label'>smile</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-sort-alpha-asc"></span>
        </span>
        <br>
        <span class='label'>sort-alpha-asc</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-sort-alpha-desc"></span>
        </span>
        <br>
        <span class='label'>sort-alpha-desc</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-sort-amount-asc"></span>
        </span>
        <br>
        <span class='label'>sort-amount-asc</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-sort-amount-desc"></span>
        </span>
        <br>
        <span class='label'>sort-amount-desc</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-sort-asc"></span>
        </span>
        <br>
        <span class='label'>sort-asc</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-sort-desc"></span>
        </span>
        <br>
        <span class='label'>sort-desc</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-sort-numeric-asc"></span>
        </span>
        <br>
        <span class='label'>sort-numeric-asc</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-sort-numeric-desc"></span>
        </span>
        <br>
        <span class='label'>sort-numeric-desc</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-sort"></span>
        </span>
        <br>
        <span class='label'>sort</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-square-double-o"></span>
        </span>
        <br>
        <span class='label'>square-double-o</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-square"></span>
        </span>
        <br>
        <span class='label'>square</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-star-1"></span>
        </span>
        <br>
        <span class='label'>star-1</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-star-2"></span>
        </span>
        <br>
        <span class='label'>star-2</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-star-3"></span>
        </span>
        <br>
        <span class='label'>star-3</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-star-4"></span>
        </span>
        <br>
        <span class='label'>star-4</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-star-5"></span>
        </span>
        <br>
        <span class='label'>star-5</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-star-half-o"></span>
        </span>
        <br>
        <span class='label'>star-half-o</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-star-o"></span>
        </span>
        <br>
        <span class='label'>star-o</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-star"></span>
        </span>
        <br>
        <span class='label'>star</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-stop"></span>
        </span>
        <br>
        <span class='label'>stop</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-strikethrough"></span>
        </span>
        <br>
        <span class='label'>strikethrough</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-support"></span>
        </span>
        <br>
        <span class='label'>support</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-tint"></span>
        </span>
        <br>
        <span class='label'>tint</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-trapezium"></span>
        </span>
        <br>
        <span class='label'>trapezium</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-trash-o"></span>
        </span>
        <br>
        <span class='label'>trash-o</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-trend-channel"></span>
        </span>
        <br>
        <span class='label'>trend-channel</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-triangle-down"></span>
        </span>
        <br>
        <span class='label'>triangle-down</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-triangle-left"></span>
        </span>
        <br>
        <span class='label'>triangle-left</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-triangle-right"></span>
        </span>
        <br>
        <span class='label'>triangle-right</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-triangle-up"></span>
        </span>
        <br>
        <span class='label'>triangle-up</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-triangle"></span>
        </span>
        <br>
        <span class='label'>triangle</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-twitter"></span>
        </span>
        <br>
        <span class='label'>twitter</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-underline"></span>
        </span>
        <br>
        <span class='label'>underline</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-undo"></span>
        </span>
        <br>
        <span class='label'>undo</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-universal-access"></span>
        </span>
        <br>
        <span class='label'>universal-access</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-unlock-alt"></span>
        </span>
        <br>
        <span class='label'>unlock-alt</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-unlock"></span>
        </span>
        <br>
        <span class='label'>unlock</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-upload"></span>
        </span>
        <br>
        <span class='label'>upload</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-user-plus"></span>
        </span>
        <br>
        <span class='label'>user-plus</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-user-tie"></span>
        </span>
        <br>
        <span class='label'>user-tie</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-users"></span>
        </span>
        <br>
        <span class='label'>users</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-v-line-dotted"></span>
        </span>
        <br>
        <span class='label'>v-line-dotted</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-vertical-line"></span>
        </span>
        <br>
        <span class='label'>vertical-line</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-vertical-range"></span>
        </span>
        <br>
        <span class='label'>vertical-range</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-zoom-in"></span>
        </span>
        <br>
        <span class='label'>zoom-in</span>
    </div>


    <div class="preview">
        <span class="inner">
            <span class="ac ac-zoom-out"></span>
        </span>
        <br>
        <span class='label'>zoom-out</span>
    </div>


    <script>
        function element(tagName, attributes, childrens) {
            var element = document.createElement(tagName);

            if (typeof attributes === 'object') {
                Object.keys(attributes).forEach(function (i) {
                    element.setAttribute(i, attributes[i]);
                });
            }
            if (typeof childrens === 'string') {
                element.textContent = childrens;
            } else if (childrens instanceof Array) {
                childrens.forEach(function (child) {
                    element
                        .appendChild(child);
                });
            }
            return element;
        }
        const input = document.getElementsByTagName('input')[0];

        const copyToClipboard = str => {
            const buffer = document.createElement('textarea');
            buffer.value = str;
            buffer.setAttribute('readonly', '');
            buffer.style.position = 'absolute';
            buffer.style.left = '-9999px';
            document.body.appendChild(buffer);
            const selected =
                document.getSelection().rangeCount > 0 ?
                    document.getSelection().getRangeAt(0) :
                    false;
            buffer.select();
            document.execCommand('copy');
            document.body.removeChild(buffer);
            if (selected) {
                document.getSelection().removeAllRanges();
                document.getSelection().addRange(selected);
            }
        };

        input.placeholder = `Search ${document.querySelectorAll('.preview').length} icons for...`;
        input.addEventListener('input', (e) => {
            const searchResult = document.querySelectorAll(`[class*="${e.target.value}"]`);
            if (searchResult.length > 0) {
                document.querySelectorAll('.preview').forEach(item => item.classList.add('hidden'));
                searchResult.forEach(item => item.parentElement.parentElement.classList.remove('hidden'))
            } else {
                document.querySelectorAll('.preview').forEach(item => item.classList.remove('hidden'));
            }
        });
        const icons = document.querySelectorAll('.preview .ac');

        Array.from(icons).forEach(icon => {
            icon.addEventListener('click', (event) => {
                copyToClipboard(event.target.parentElement.innerHTML.trim());
                document.querySelector('body').append(element('div', {
                    class: 'alert font-alert alert-success',
                    role: 'alert'
                }, 'Icon code has been copied to clipboard'));
                Array.from(document.querySelectorAll('.font-alert')).forEach(alert => {
                    setTimeout(() => alert.remove(), 3000);
                })
            });
        });
    </script>

</body>

</html>